<script setup lang="ts">
import html2canvas from 'html2canvas'
import DictTag from '@/components/DictTag/index.vue'
import { useDict } from '@/utils/dict'
import type { Student, StudentEducationInfo, StudentFamilyInfo, StudentScoreInfo } from '@/types/user'
import { parseTime } from '@/utils/ruoyi'
import exportPDF from '@/utils/exportPDF'

defineProps<
    {
      student?:
      Student &
      StudentScoreInfo &
      { familyMembers?: StudentFamilyInfo[]; educationalExperience?: StudentEducationInfo[] }
    }
>()

async function handleExport() {
  const promise = Promise.all([
    html2canvas(document.getElementById('page1')!, { logging: false, scale: window.devicePixelRatio * 3 }),
    html2canvas(document.getElementById('page2')!, { logging: false, scale: window.devicePixelRatio * 3 }),
  ])
  exportPDF(await promise, 'p', 'cm', [21.0, 29.7])
}

defineExpose({ onExport: handleExport })

const {
  sys_user_sex,
  student_disciplines,
  student_nation,
  student_political,
  student_language,
} = useDict(
  'sys_user_sex',
  'student_disciplines',
  'student_nation',
  'student_political',
  'student_language',
)
</script>

<template>
  <div class="one">
    <div id="page1" class="page1">
      <div class="title">
        <h1>2022-2023学年国家奖学金申请审批表</h1>
      </div>
      <div class="base">
        <div><strong>学校：</strong></div>
        <div></div>
        <div><strong>学号：</strong></div>
        <div></div>
      </div>
      <div class="grating">
        <div class="basic">
          <div class="left" style="border-bottom: none;">
            <strong>基本<br>情况</strong>
          </div>
          <div class="right" style="border:none">
            <div class="right1" style="border:none">
              <div class="content" style="display: flex">
                <span v-for="(i, index) in '姓名'" :key="index">{{ i }}</span>
              </div>
              <div class="content" style="display: flex">
                <span>{{ student?.studentName }}</span>
              </div>
              <div class="content" style="display: flex">
                <span v-for="(i, index) in '性别'" :key="index">{{ i }}</span>
              </div>
              <DictTag :options="sys_user_sex" :value="student?.sex" type="text" />
              <div class="content" style="display: flex">
                <span v-for="(i, index) in '出生年月'" :key="index">{{ i }}</span>
              </div>
              <div class="content" style="display: flex">
                <span>{{ parseTime(student?.birthday || '', '{y}年{m}月') }}</span>
              </div>
              <div class="content" style="display: flex">
                <span v-for="(i, index) in '政治面貌'" :key="index">{{ i }}</span>
              </div>
              <DictTag :options="student_political" :value="student?.studentPolitical" type="text" />
              <div class="content" style="display: flex">
                <span v-for="(i, index) in '民族'" :key="index">{{ i }}</span>
              </div>
              <DictTag :options="student_nation" :value="student?.studentNation" type="text" />
              <div class="content" style="display: flex">
                <span v-for="(i, index) in '入学时间'" :key="index">{{ i }}</span>
              </div>
              <div class="content" style="display: flex"><span></span></div>
              <div class="content" style="display: flex"><span v-for="(i, index) in '院系'" :key="index">{{ i }}</span></div>
              <div><span>{{ student?.studentCollege }}</span></div>
              <div class="content" style="display: flex"><span v-for="(i, index) in '专业'" :key="index">{{ i }}</span></div>
              <div class="content" style="display: flex"><span>{{ student?.studentMajor }}</span></div>
              <div class="content" style="display: flex"><span v-for="(i, index) in '学制'" :key="index">{{ i }}</span></div>
              <div><span></span></div>
              <div class="content" style="display: flex"><span v-for="(i, index) in '年级'" :key="index">{{ i }}</span></div>
              <div><span>{{ student?.studentGrade }}</span></div>
              <div class="content" style="display: flex"><span v-for="(i, index) in '班级'" :key="index">{{ i }}</span></div>
              <div><span></span></div>
              <div class="content" style="display: flex"><span v-for="(i, index) in '联系电话'" :key="index">{{ i }}</span></div>
              <div><span></span></div>
            </div>
            <div class="xxx" style="border:none">
              <div class="sfzh">
                <div class="content" style="display: flex;border-color: white">
                  <span v-for="(i, index) in '身份号码'" :key="index">{{ i }}</span>
                </div>
              </div>
              <div class="ccc" style="border:none">
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
                <div><span></span></div>
              </div>
            </div>
          </div>
        </div>
        <div class="study" style="border-bottom:0;border-top:0">
          <div class="left" style="border-bottom:0">
            <strong>学习<br>情况</strong>
          </div>
          <div class="right2" style="border:none">
            <div style="border-top:none"><span>成绩排名:</span>{{ student?.classRank }}<span class="bbb"></span>(名次人数)</div>
            <div style="border-top:none"><span>实行综合考评排名:</span><span class="bbb"></span>(选填"是"或"否")</div>
            <div><span>必修课</span><span class="bbb"></span><span>门，其中及格以上</span><span class="bbb"></span>门</div>
            <div><span>如是，排名:</span><span class="bbb"></span><span>(名次/总人数)</span></div>
          </div>
        </div>
        <div class="award">
          <div class="left">
            <strong>主要<br>获奖<br>情况</strong>
          </div>
          <div class="right3" style="border:none">
            <div style="border-top:none"><span>日期</span></div>
            <div style="border-top:none"><span>奖项名称</span></div>
            <div style="border-top:none"><span>颁奖单位</span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div><span></span></div>
            <div style="border-bottom: none;"><span></span></div>
            <div style="border-bottom: none;"><span></span></div>
            <div style="border-bottom: none;"><span></span></div>
          </div>
        </div>
        <div class="apply">
          <div class="left" style="border-top:none ;">
            <div style="border-color: white;">
              <strong>申请<br>理由</strong><br>
              <span style="font-size: 12px;">(200<br>字)</span>
            </div>
          </div>
          <div class="right4" style="border-top:none">
            <div style="border-color: white;">
              <p class="shenqingren">申请人签名(手签):</p>
              <p  class="two">年&nbsp;&nbsp;月&nbsp;&nbsp;日&nbsp;&nbsp;</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="page2" class="page2">
      <div class="grating2">
        <div class="left">
          <div>
            <strong>推荐<br>理由</strong>
            <span style="font-size: 12px;">(100<br>字)</span>
          </div>
        </div>
        <div class="matter">
          <p>推荐人(辅导员或班主任)签名:</p>
          <span class="time">
            <span>年&nbsp;&nbsp;</span>
            <span>月&nbsp;&nbsp;</span>
            <span>日&nbsp;&nbsp;</span>
          </span>
        </div>
        <div class="left">
          <div>
            <strong>院</strong>
            <strong>(系</strong>
            <strong>)</strong>
            <strong>意</strong>
            <strong>见</strong>
          </div>
        </div>
        <div class="matter">
          <p style="bottom: 120px;">院系主管学生工作领导签字:</p>
          <p style="right: 120px;">(院系公章)</p>
          <span class="time">
            <span>年&nbsp;&nbsp;</span>
            <span>月&nbsp;&nbsp;</span>
            <span>日&nbsp;&nbsp;</span>
          </span>
        </div>
        <div class="left">
          <div>
            <strong>学</strong>
            <strong>校</strong>
            <strong>意</strong>
            <strong>见</strong>
          </div>
        </div>
        <div class="matter">
          <p style="top: 80px; left: 20px;">&nbsp;&nbsp;经评审，并在校内____月____日至____月____日公示____个工作日，无异议，现报请批准同学获得国家奖学金。</p>
          <p style="right: 120px;">(学校公章)</p>
          <span class="time">
            <span>年&nbsp;&nbsp;</span>
            <span>月&nbsp;&nbsp;</span>
            <span>日&nbsp;&nbsp;</span>
          </span>
        </div>
        <p>制表：全国学生资助管理中心&nbsp;2023版</p>
      </div>
    </div>
  </div>
</template>

<style>

.title {
  font-family:'黑体';
  font-size: 20px;
}
.one{
  width: 100%;
  margin: auto;
  font-family: '宋体';
  background-color: white;
  font-size: 14px;
}
.page1{
  box-sizing: border-box;
  width: 23.6cm;
  height: 32.7cm;
  padding: 1.6cm 2.6cm 3.6cm;
  grid-template-columns: 5% 45% 5% 45%;
  margin: auto;
}
.page2{
  padding: 2.6cm;
  box-sizing: border-box;
  width: 23.6cm;
  height: 32.7cm;
  margin: auto ;
  position: relative;
}
p{
  position: absolute;
  right: 3cm;
  bottom: 3cm;
}
.title{
  text-align: center;
}
.base{
  display: grid;
  grid-template-columns: 8% 42% 8% 42%;
  margin-bottom: 2px;
}
.page1 .grating{
  height: 26cm;
  display: grid;
  grid-template-rows: 25% 10% 25% 40%;
}
.page1 .grating>div{
  display: grid;
  grid-template-columns: 8% 92%;
}
.page1 .grating div {
  border: 1px solid black;
}
.grating div .left{
  display: grid;
  place-items: center;
}
.grating .right{
  display: grid;
  grid-template-rows: 4fr 1fr;
  text-align: center;

}
div.xxx {
  display: grid;
  grid-template-columns: 2fr 13fr;
}
div.ccc {
  display: grid;
  grid-template-columns:repeat(18, 1fr);
}
.grating .right1{
  display: grid;
  grid-template: repeat(4, 5fr)/2fr 3fr 2fr  2fr 2fr 4fr;
  text-align:center;

}
div.xxx div.sfzh,
.grating .right1 div,
.grating .right3 div{
  display: grid;
  align-items: center;
  text-align: center;
}
div.right2 {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 8fr 8fr;

}
span.bbb {
  display: inline-block;
  width: 32px;
  border-bottom: 1px solid black;
}
.grating .right2 div{
  padding-top: 12px;
  padding-left: 6px;
}
div.right3 {
  display: grid;
  grid-template: repeat(5,1fr)/ 225fr 717fr 672fr;
}
.right4 {
  position: relative;
}
.right4 div{
  position: absolute;
  bottom: 0;
  right: 0;

}
.right4 div .shenqingren {
  text-align:left;
  width: 150px;
  position: absolute;
  right: 120px;
  bottom: 60px;


}
.right4 div p.two {
  position: absolute;
  right: 100px;
  bottom: 25px;

}
.page2 .grating2 {
  border: 1px solid black;
  height: 26cm;
  display: grid;
  grid-template-columns: 8% 92%;
  grid-template-rows: repeat(3, 1fr);
}
.page2 .grating2 div{
  border: 1px solid black;
}
.grating2 .left {
  display: grid;
  align-items: center;
  text-align: center;
}
.grating2 .left div{
  border-color: white;
}
.grating2 strong {
  display: block;
  padding: 6px;
}
.grating2 .matter {
  position: relative;
}
.grating2 .matter p {
  position: absolute;
  bottom: 80px;
  right: 100px;
  line-height: 2;
}
.grating2 .matter .time {
  position: absolute;
  bottom: 60px;
  right: 80px;
}
span {
  padding: 0 2px; /* 调整字符之间的间距 */
  display: inline;
}
.content {
  justify-content: center;
}
</style>
